<template>
  <div class="staff">
    <div class="staff-headimg">
      <img :src="staff.head_icon" alt="" v-imgField>
    </div>
    <div class="staff-message">
      <div class="name-mark">
        <span class="name">{{ staff.true_name }}</span>
      </div>
      <p class="department">部门：{{ staff.depart }}</p>
      <p class="workingYear-evaluate">
        <span class="workingYear">工作：{{ staff.worktime }}年</span>
      </p>
      <p class="department">级别：{{staff.employee_level}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['staff']
  }
</script>

<style scoped lang="scss">
  .staff {
    padding: .45rem .275rem;
    display: flex;
    border-bottom: .0125rem solid #e7e7e7;/*no*/
    &:last-child {
      border-bottom: 0;
    }
    .staff-headimg {
      width: 1.85rem;
      height: 1.85rem;
      margin-right: .2375rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .staff-message {
      flex: 1;
      .name-mark {
        display: flex;
        justify-content: space-between;
        .name {
          font-size: .375rem;
          color: #333;
        }
      }
      .department, .workingYear-evaluate {
        font-size: .3rem;
        margin-top: .25rem;
      }
      .workingYear-evaluate {
        margin-top: .1625rem;
        display: flex;
        span {
          flex: 1;
        }
      }
    }
  }
</style>
